<template>
  <a-mentions
    v-model:value="value1"
    :autofocus="autofocus"
    :default-value="defaultValue"
    :filter-option="filterOption"
    :get-popup-container="getPopupContainer"
    :not-found-content="notFoundContent"
    :placement="placement"
    :prefix="prefix"
    :split="split"
    :validate-search="validateSearch"
  >
    <template v-if="$slots.notFoundContent" #notFoundContent>
      <slot name="notFoundContent" />
    </template>
    <slot />
  </a-mentions>
</template>

<script>
import { defineComponent, computed } from 'vue'
import { Mentions } from 'ant-design-vue'
export default defineComponent({
  name: 'ZMentions',
  components: {
    AMentions: Mentions
  },
  props: {
    value: {
      type: String,
      default: undefined
    },
    autofocus: {
      type: Boolean,
      default: false
    },
    defaultValue: {
      type: String,
      default: undefined
    },
    filterOption: {
      type: [Boolean, Function],
      default: undefined
    },
    getPopupContainer: {
      type: Function,
      default: undefined
    },
    notFoundContent: {
      type: String,
      default: 'Not Found'
    },
    placement: {
      type: String,
      default: 'bottom'
    },
    prefix: {
      type: [String, Array],
      default: '@'
    },
    split: {
      type: String,
      default: undefined
    },
    validateSearch: {
      type: Function,
      default: undefined
    }
  },
  setup(props, _ref) {
    const value1 = computed({
      get() {
        return props.value
      },
      set(val) {
        if (props.max) {
          updateVal(val)
        }
        _ref.emit('update:value', val)
      }
    })
    return {
      value1
    }
  }
})
</script>
